﻿        <div id="app">
    <div class="ui-container">
        <div class="ui-img-left" v-on:tap="detail(0)">
            <div class="img-box">
                <span>体验千净</span>
                <img style="width: 100%;" src="~/Statics/Images/shop/main/ui-img-left.png" />
            </div>
        </div>
        <div class="ui-img-right">
            <div class="img-box" v-on:tap="detail(1)">
                <span>签约千净</span>
                <img style="width: 100%;" src="~/Statics/Images/shop/main/ui-img-right1.png" />
            </div>
            <div class="img-box" v-on:tap="detail(2)">
                <span>单项千净</span>
                <img style="width: 100%; margin-bottom: 0px;" src="~/Statics/Images/shop/main/ui-img-right2.png" />
            </div>
        </div>
    </div>
    <div class="ui-container" v-on:tap="detail(3)">
        <div class="img-box">
            <span>组团千净</span>
            <img style="width: 100%;" src="~/Statics/Images/shop/main/ui-img-bottom.png" />
        </div>
    </div>

    <br />
    <br />

</div>

@section Styles{
    @Styles.Render("~/cssbundles/consumer/subscribe")
    <style>
        .ui-container {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-top: 5px;
        }

        .img-box {
            width: 100%;
        }

            .img-box > span {
                display: block;
                background: white;
                color: #85858b;
                opacity: 0.80;
                padding: 0px 5px;
                font-size: 12px;
                position: absolute;
            }

        .ui-img-left {
            width: 53%;
            height: auto;
            float: left;
        }

        .ui-img-right {
            float: right;
            height: auto;
            width: 46%;
        }

        .ui-slider {
            height: 100px;
        }

        body {
            background-color: white;
        }

        .product-item-img {
            padding-top: 10px;
            padding-right: 10px;
        }

        .top-header {
            color: #80C3B1;
            font-size: 16px;
            line-height: 40px;
            color: #fff3f9;
            background-color: #60B49D;
        }

            .top-header .ui-icon-home {
                font-size: 32px;
                color: #fff3f9;
                padding-bottom: 3px;
            }

        .top-header-title h2 {
            font-weight: bold;
        }

        .ui-searchbar-wrap {
            margin-top: 10px;
            background-color: #ececec;
        }

        .ui-searchbar-search {
            color: #85858b !important;
        }

        .ui-slider {
            margin-top: 10px;
        }

        .ui-slider-indicators {
            -webkit-box-pack: center;
        }

        .product-title {
            margin-top: 10px;
        }

            .product-title span {
                margin-left: 10px;
                padding-left: 20px;
                border-left: 5px solid #80C3B1;
            }

        .product-item {
            padding-left: 10px;
            font-size: 10px;
            color: #80C3B1;
        }

        .product-item-title h3 {
            font-weight: bolder;
        }

        .product-item-sprice {
            font-weight: bold;
        }

        .product-item-weight {
            font-weight: bold;
        }

        .product-item-mprice {
            font-style: oblique;
            text-decoration: line-through;
        }


        .action-list button {
            margin: 10px;
            background-image: none;
            height: 50px;
            line-height: 15px;
            font-size: 8px;
            color: #fff;
            text-align: center;
            border: 0 none #fff3f9;
        }

        .action-item {
            margin: 0 15px;
            text-align: center;
            line-height: 15px;
        }

        .action-item-personal button {
            background-color: #FB939A;
        }

        .action-item-personal h6 {
            color: #FB939A;
        }

        .action-item-shopcart button, .action-item-shopcart button:active {
            background-color: #9FD5BE;
        }

        .action-item-shopcart h6 {
            color: #9FD5BE;
        }

        .action-item-orderlist button {
            background-color: #FFC488;
        }

        .action-item-orderlist h6 {
            color: #FFC488;
        }
    </style>
}

@section Scripts{
    @Scripts.Render("~/jsbundles/consumer/subscribe")
    <script>
        var model = new Vue({
            el: '#app',
            data: {},
            methods: {
                showLoading: function () {
                    $('#loading').addClass('show')
                },
                detail: function (id) {
                    if (id == 0) {
                        window.parent.location.href = "../Experience?openid=@ViewBag.openid";

                    }
                    if (id == 1) {
                        window.parent.location.href = "../Sign?openid=@ViewBag.openid";

                    }
                    if (id == 2) {
                        window.parent.location.href = "../OneItem?openid=@ViewBag.openid";

                    }
                },
                showError:function(msg){
                    swal({
                        title: "",
                        text: msg,
                        type: "error",
                        showConfirmButton: false,
                        showCancelButton: false,
                        timer: 2000,
                    });
                },
            }

        })

        $('.ui-searchbar').click(function () {
            $('.ui-searchbar-wrap').addClass('focus');
            $('.ui-searchbar-input input').focus();
        });

        $('.ui-icon-close').click(function (e) {
            $('.ui-searchbar-wrap').removeClass('focus');
            e.stopPropagation();
        });
    </script>
}
